<template>
	<view class="e-flex bg-white e-radius-20" :class="'order-address'+type" @tap="jump">
		<view class="e-flex-1">
			<template v-if="info?.receivingName||info?.name">
				<view class="e-flex" >
					<view class="e-flex-1">
						<view class="c-333 e-font-28 fw-600 e-m-b-10">
							{{info.receivingAddress|| `${info.nameExt||''} ${info.address||''}`}}</view>
						<view class="e-flex c-secondary e-font-24">
							<text class="e-m-r-20">{{info.receivingName||info.name}}</text>
							<text>{{info.receivingPhone||info.phone}}</text>
						</view>
					</view>
					<view class="update_btn e-font-24" @tap.stop="handleJumpAddress"
						v-if="showUpdateAddr && !info?.updateAddressTime && info?.receivingStatus == 1"
						:style="{borderColor:AppSkin.primary,color:AppSkin.primary}">
						{{$t('order.更改')}}
					</view>
				</view>
			</template>
			<text v-if="!info?.name && type === '1'">{{$t('order.添加收货地址')}}</text>
		</view>

		<view v-if="type === '1'" class="e-m-l-26">
			<app-image size="36rpx" src="arrow_right.png"></app-image>
		</view>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'order-address',
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	})
</script>
<script setup lang="ts">
	import type { AddressItem } from '@/common/request/api'
	import { useCurrentInstance } from '@/common/hooks'

	const props = withDefaults(defineProps<{
		info : AddressItem
		type ?: string
		showUpdateAddr ?: boolean
	}>(), {
		type: '2'
	})
	
	const emit = defineEmits(['update:info'])

	const ctx = useCurrentInstance()
	
	const handleSelectAddress = (e: AddressItem) => {
		console.log(e)
		emit('update:info',e)
	};
	const handleJumpAddress = () => {
		ctx.$goTo('/pages/user/receivingAddress/index', { type: 1 },{
			selectAddress:handleSelectAddress
		});
	}

	const jump = () => {
		if (props.type === '1') {
			handleJumpAddress()
		}
	}
</script>

<style scoped lang="scss">
	.address-icon {
		border-radius: 50%;
		background: var(--gradient-primary);
	}

	.order-address1 {
		padding: 42rpx 22rpx 42rpx 30rpx;
	}

	.order-address2 {
		padding: 42rpx 84rpx 42rpx 30rpx;

	}

	.update_btn {
		border-radius: 100rpx;
		padding: 4rpx 20rpx;
		border: 1px solid;
	}
</style>